<template>
	<div class="FMdetail">
		<div class="main top">
			<h3>结算详情</h3>
			<div class="content">
				<div class="culonm">
					<p>单号：201903270001</p>
					<p>单位：重庆丁丁猫旅游管理有限公司</p>
					<p>时段：2019-01-01 至 2019-01-02</p>
				</div>
				<div class="culonm">
					<p>结算金额：1,803,560.00</p>
					<p>订单数量：980</p>
					<p>
						<span class="lookbtn">查看订单明细</span>
					</p>
				</div>
			</div>
		</div>
		<div class="main bottom">
			<h3>结算单列表</h3>
			<div class="content">

				<div class="tab">
					<div class="li" v-for="(item, key, index) in tablist" :key="item.id" :class="{active:isactive===item.id}" @click="tabactive(item.id)">
						{{item.name}}
					</div>
				</div>
				<el-table :data="tableData" border style="width: 100%" :row-class-name="tableRowClassName">
					<el-table-column prop="a1" label="序号" width="52"> </el-table-column>
					<el-table-column prop="a2" label="结算单号" width="160"> </el-table-column>
					<el-table-column prop="a3" label="金额" width="130"> </el-table-column>
					<el-table-column prop="a4" label="结算时间" width="130"> </el-table-column>
					<el-table-column prop="a5" label="结算单位" width="130"> </el-table-column>
					<el-table-column prop="a6" label="订单数量" width="130"> </el-table-column>
				</el-table>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		name: "FMdetail",
		data() {
			return {
				isactive: 1,
				tablist: [{
					id: 1,
					name: "全部结算单",
				}, {
					id: 2,
					name: "已结算",
				}, {
					id: 3,
					name: "未结算",
				}, {
					id: 4,
					name: "异常",
				}, {
					id: 5,
					name: "未处理",
				}, ],

				tableData: [{
					a1: '1',
					a2: '2',
					a3: '3',
					a4: '4',
					a5: '5',
					a6: '6',
				}, {
					a1: '1',
					a2: '2',
					a3: '3',
					a4: '4',
					a5: '5',
					a6: '6',
				}, {
					a1: '1',
					a2: '2',
					a3: '3',
					a4: '4',
					a5: '5',
					a6: '6',
				}, {
					a1: '1',
					a2: '2',
					a3: '3',
					a4: '4',
					a5: '5',
					a6: '6',
				}, ]
			}
		},
		methods: {

			tabactive(res) {
				this.isactive = res;
			},
			tableRowClassName({ row, rowIndex }) {
				if (rowIndex%2 === 0) {
					return 'warning-row';
				}
				return '';
			}
		},
	}
</script>

<style lang="less">
	.FMdetail {
		width: 1080px;
		margin: auto;
		border: 1px solid #ff9900;
		border-radius: 8px;
		margin-top: 15px;
		padding: 20px 0;
		box-sizing: border-box;

		.main {
			width: 855px;
			margin: auto;
			border: 1px solid #ff9900;
			border-radius: 8px;

			h3 {
				width: 100%;
				height: 40px;
				text-align: left;
				font-weight: normal;
				font-size: 14px;
				line-height: 40px;
				padding-left: 45px;
				box-sizing: border-box;
				position: relative;
				color: #41c6db;

				&:after {
					content: "";
					display: block;
					width: 10px;
					height: 10px;
					border-radius: 50%;
					background: #41c6db;
					position: absolute;
					top: 50%;
					left: 25px;
					transform: translateY(-50%);
				}
			}

			&.top {
				height: 170px;

				.content {
					width: 100%;
					display: flex;
					justify-content: space-between;
					padding: 0 110px;
					box-sizing: border-box;

					.culonm {
						width: 270px;
						height: 100px;
						background: #f2f2f2;
						text-align: left;
						padding: 20px;
						box-sizing: border-box;
						display: flex;
						flex-wrap: wrap;
						align-content: space-between;
						font-size: 12px;
						color: #666;

						p {
							width: 100%;

							.lookbtn {
								margin: auto;
								display: block;
								width: 135px;
								height: 20px;
								color: #ff9900;
								border: 1px solid #ff9900;
								border-radius: 5px;
								line-height: 20px;
								text-align: center;
							}
						}
					}
				}
			}

			&.bottom {
				margin-top: 15px;
				height: 450px;

				.content {
					padding: 0 60px;
					box-sizing: border-box;

					.cell {
						text-align: center;
					}

					.el-table .warning-row {
						background: #ffffcc;
					}
				}

				.tab {
					width: 100%;
					display: flex;
					justify-content: flex-start;

					.li {
						border-right: none;
						font-size: 14px;
						line-height: 30px;
						padding: 0 15px;
						box-sizing: border-box;
						cursor: pointer;

						&.active {
							background: #ff9900;
							color: #fff;
						}
					}
				}
			}

		}
	}
</style>
